import React, { Component } from 'react';
import { Input, Select, Button, Form } from 'antd';
import { inject, observer } from 'mobx-react';
import { ClearOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';

@inject('store')
@observer
class Top extends Component {

  formRef = React.createRef();

  render() {
    const { store } = this.props;
    return (
      <div>
        <div style={{ float: 'left', width: 800 }}>
          <Form ref={this.formRef} layout="inline">
            <Form.Item label='所属分类' name='categoryId'>
              <Select style={{ width: 200 }}>
                {store.categoryList.map(item => {
                  return <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>;
                })}
              </Select>
            </Form.Item>
            <Form.Item label='字典名称' name='name'>
              <Input placeholder="字典名称/标识" autoComplete="off"/>
            </Form.Item>
            <Form.Item>
              <Button style={{ marginRight: 5 }} type="primary" htmlType="submit"
                      onClick={() => store.listDict(this.formRef.current.getFieldsValue())}
                      icon={<SearchOutlined/>}>查询</Button>
              <Button onClick={() => this.formRef.current.resetFields()} icon={<ClearOutlined/>}>清空</Button>
            </Form.Item>
          </Form>
        </div>
        <Button style={{ float: 'right' }} type='primary' icon={<PlusOutlined/>}
                onClick={() => store.showDictDialog()}>新增</Button>
      </div>
    );
  }
}

export default Top;
